<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>绑定Value</title>
  <link rel="stylesheet" href="">
  <script type="text/javascript" src="../../js/vue.js"></script>
</head>

<body>
    <h1><a href="index.html">基础用法</a>|<a href="value.html">绑定Value</a></h1>
   <hr>
   <h2>复选框</h2>
  <form id="form">
    <input type="radio" v-model="picked" v-bind:value="picked"><span>{{picked}}</span>
    <input type="checkbox" v-model.lazy="toggle" v-bind:true-value="a" v-bind:false-value="b" >{{toggle}}
    <input type="number" v-model.number="number" placeholder=".number修饰符，将输入值转为 Number 类型" style="width:280px"/>
    <input type="text" v-model.trim="number" placeholder=".trim修饰符，自动过滤输入的首尾空格" style="width:280px" />
  </form>
  <script type="text/javascript">
  // 基础用法
  var form = new Vue({
    el:"#form",
    data: {
      picked: false,
      toggle: "",
      a:"选中",
      b:"未选中",
      number:"12312"
    }
  });

  </script>
</body>

</html>
